<template>
  <div class="loginContainer">
    <div class='list-wrap'>
      <div class='item' @click='chooseImage'>
        <div class='avator_logo' v-if='userInfo'>
          <image :src='imgHost+userInfo.imagePath' class='avatar-img'/>
        </div>
        <div><span class='mr20'>更换头像</span><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
      <div class='item' @click='toDetail("info_edit")'>
        <div>账号修改</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
      <div class='item' @click='toDetail("pwd_edit")'>
        <div>密码修改</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { mapState } from 'vuex'
export default {
  data() {
    return {
      file: null,
    }
  },
  methods:{
    chooseImage(e) {
      var _this = this;
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          _this.file = res.tempFilePaths[0];
          
        },
        fail: function () {
          console.log('fail');
        },
        complete: function () {
          console.log('commplete');
        }
      })
    },
    toDetail(page){
       wx.navigateTo({
          url:`/pages/${page}/main`
       })
    }
  },
  computed:{
    ...mapState(['userInfo','imgHost']),
  }
}
</script>

<style lang='less'>
  page{
    height: 100%;
    background:#eef7fd;
  }
  .loginContainer{
    height: 100%;
    .list-wrap{
      margin: 20rpx;
      border:1px solid #eceeed;
      border-radius: 16rpx;
      background: #fff;
      .avator_logo{
        width: 90rpx;
        height: 90rpx;
        background: blue;
        border-radius:64rpx;
        overflow: hidden;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .mr20{
        margin-right:20rpx; 
      }
      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f2f4f3;
        padding:20rpx;
        font-size:32rpx;
        color:#83878a;
        .img{
          width: 40rpx;
          height: 40rpx;
          margin-right:40rpx ;
          margin-top:-10rpx;
          vertical-align: middle 
        }
      }
    }
  }
</style>

